<template>
  <div class="xtx_search" :class="{active}">
    <span class="iconfont icon-search"></span>
    <input @focus="active=true" @blur="active=false" v-model="keyword" type="text" @keyup.enter="toSearch()" placeholder="搜一搜" />
  </div>
</template>

<script>
export default {
  name: 'app-header-search',
  data () {
    return {
      keyword: '',
      active: false
    }
  },
  methods: {
    toSearch () {
      this.$router.push({ path: '/search', query: { keyword: encodeURIComponent(this.keyword) } })
      this.keyword = ''
    }
  }
}
</script>

<style scoped lang='less'>
  // 搜索
  .xtx_search {
    width: 185px;
    height: 32px;
    border-bottom: 2px solid #f4f4f4;
    position: relative;
    margin-top: 2px;
    &.active {
        border-color: @xtxColor;
    }
    .icon-search {
      position: absolute;
      left: 0;
      top: 0;
      font-size: 18px;
      color: #333;
      height: 37px;
      width: 37px;
      text-align: center;
    }
    input {
      width: 100%;
      height: 100%;
      color: #999;
      padding-left: 37px;
    }
  }
</style>
